<template>
  <div class="loadingScreen" :class="{ 'fadeOut': !isLoading }">
    <div class="backgroundAnimation">
      <div class="animationLayer" v-for="i in 3" :key="i"></div>
    </div>
    <div class="loadingContainer">  
      <div class="loadingLogo">SITE</div>
      <div class="loadingSpinner">
        <div class="spinner"></div>
      </div>
      <div class="progressContainer">
        <div class="progressBar" :style="{ width: `${loadingProgress}%` }"></div>
      </div>
      <div class="loadingText">{{ loadingProgress }}% 加载中...</div>
      <div class="loadingTip">{{ currentTip }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps({
  minLoadingTime: {
    type: Number,
    default: 2000 // 最小加载时间为2秒
  }
});

const isLoading = ref(true);
const loadingProgress = ref(0);
const currentTip = ref('');

// 加载提示列表
const loadingTips = [
  '正在加载资源...',
  '准备页面元素中...',
  '优化用户体验...',
  '正在获取最新数据...',
  '正在应用主题样式...',
  '正在初始化组件...',
  '即将完成...'
];

// 随机更新提示
const updateTip = () => {
  const randomIndex = Math.floor(Math.random() * loadingTips.length);
  currentTip.value = loadingTips[randomIndex];
};

onMounted(() => {
  // 初始提示
  updateTip();

  // 定期更新提示
  const tipInterval = setInterval(updateTip, 2000);

  // 模拟进度增加
  const progressInterval = setInterval(() => {
    if (loadingProgress.value < 90) {
      // 先快速增加到一定程度，然后减慢
      const increment = loadingProgress.value < 60 ?
        Math.random() * 8 + 2 :
        Math.random() * 3 + 1;

      loadingProgress.value = Math.min(90, loadingProgress.value + increment);
    }
  }, 200);

  // 检测页面是否加载完成
  const pageLoadPromise = new Promise<void>((resolve) => {
    if (document.readyState === 'complete') {
      resolve();
    } else {
      window.addEventListener('load', () => resolve());
    }
  });

  // 确保最小显示时间
  const minTimePromise = new Promise<void>((resolve) => {
    setTimeout(() => resolve(), props.minLoadingTime);
  });

  // 两个条件都满足后快速完成进度条并隐藏加载界面
  Promise.all([pageLoadPromise, minTimePromise]).then(() => {
    clearInterval(progressInterval);
    clearInterval(tipInterval);
    currentTip.value = '加载完成！';

    // 快速完成进度
    const completeProgress = () => {
      if (loadingProgress.value < 100) {
        loadingProgress.value += 2;
        if (loadingProgress.value < 100) {
          requestAnimationFrame(completeProgress);
        } else {
          // 进度达到100%后延迟一小段时间再隐藏
          setTimeout(() => {
            isLoading.value = false;

            // 加载完成后触发事件
            setTimeout(() => {
              emit('loading-complete');
            }, 500); // 给过渡动画预留时间
          }, 300);
        }
      }
    };

    completeProgress();
  });
});

const emit = defineEmits(['loading-complete']);
</script>

<style lang="scss" scoped>
.loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;

  &.fadeOut {
    opacity: 0;
    visibility: hidden;
  }

  .backgroundAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .animationLayer {
      position: absolute;
      top: 20%;
      left: 50%;
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      transform: translate(-50%, -50%);

      &:nth-child(1) {
        width: 400px;
        height: 400px;
        animation: float 15s infinite ease-in-out;
      }

      &:nth-child(2) {
        width: 300px;
        height: 300px;
        animation: float 20s infinite ease-in-out reverse;
        left: 25%;
        top: 70%;
      }

      &:nth-child(3) {
        width: 200px;
        height: 200px;
        animation: float 18s infinite ease-in-out 1s;
        left: 75%;
        top: 40%;
      }
    }
  }

  .loadingContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    position: relative;
    z-index: 1;

    .loadingLogo {
      font-size: 64px;
      font-weight: bold;
      margin-bottom: 40px;
      color: #fff;
      letter-spacing: 10px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }

    .loadingSpinner {
      margin-bottom: 24px;

      .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
    }

    .progressContainer {
      width: 100%;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      margin-bottom: 16px;
      overflow: hidden;

      .progressBar {
        height: 100%;
        background-color: #fff;
        border-radius: 2px;
        transition: width 0.2s ease;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }
    }

    .loadingText {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.7);
      font-family: 'Arial', sans-serif;
      margin-bottom: 16px;
    }

    .loadingTip {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
      min-height: 20px;
      animation: pulse 2s infinite;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  25% {
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
  }

  50% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
  }

  75% {
    transform: translate(-50%, -50%) scale(0.9) rotate(270deg);
  }
}
</style>